<template>
  <div class="moreEquity">
    <van-tabs
      :class="'paddingL'"
      v-model="active"
      offset-top="0"
      sticky
      swipe-threshold="3"
      :ellipsis="false"
    >
      <!-- <van-tab name="0" title="永久免费版">
        <ul class="free">
          <li>
            <div class="listItem" v-for="(item,i) in vipList['listfree']" :key="i">
              <div class="title">{{ item.moduleName }}</div>

              <div class="p2" v-for="(item_son,sonInd) in item.subList" :key="sonInd+'c'">
                <span class="span1">{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' && item_son.permission != 'false'
                  "
                >{{ item_son.permission }}</span>
                <img src="@/assets/three/1.png" v-if="item_son.permission == 'true'" class="img01" />
                <img src="@/assets/three/2.png" v-if="item_son.permission == 'false'" class="img02" />
              </div>
            </div>
          </li>
        </ul>
      </van-tab> -->
      <van-tab name="0" title="体验版">
        <ul class="free">
          <li>
            <div class="listItem" v-for="(item,i) in vipList['listHalloween']" :key="i">
              <div class="title">{{ item.moduleName }}</div>

              <div class="p2" v-for="(item_son,sonInd) in item.subList" :key="sonInd+'c'">
                <span class="span1">{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' && item_son.permission != 'false'
                  "
                >{{ item_son.permission }}</span>
                <img src="@/assets/three/1.png" v-if="item_son.permission == 'true'" class="img01" />
                <img src="@/assets/three/2.png" v-if="item_son.permission == 'false'" class="img02" />
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab name="2">
        <template #title>
          <div class="tab_title"><span>SVIP</span><i>个人版</i></div>
        </template>
        <ul class="free">
          <li>
            <div class="listItem" v-for="(item,i) in vipList['listsvipPersonal']" :key="i">
              <div class="title">{{ item.moduleName }}</div>

              <div class="p2" v-for="(item_son,sonInd) in item.subList" :key="sonInd+'c'">
                <span class="span1">{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' && item_son.permission != 'false'
                  "
                >{{ item_son.permission }}</span>
                <img src="@/assets/three/1.png" v-if="item_son.permission == 'true'" class="img01" />
                <img src="@/assets/three/2.png" v-if="item_son.permission == 'false'" class="img02" />
              </div>
              <!-- <div class="p3"></div>-->
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab name="1">
        <template #title>
          <div class="tab_title"><span>VIP</span><i>企业版</i></div>
        </template>
        <ul class="free">
          <li>
            <div class="listItem" v-for="(item,i) in vipList['listvip']" :key="i">
              <div class="title">{{ item.moduleName }}</div>

              <div class="p2" v-for="(item_son,sonInd) in item.subList" :key="sonInd+'c'">
                <span class="span1">{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' && item_son.permission != 'false'
                  "
                >{{ item_son.permission }}</span>
                <img src="@/assets/three/1.png" v-if="item_son.permission == 'true'" class="img01" />
                <img src="@/assets/three/2.png" v-if="item_son.permission == 'false'" class="img02" />
              </div>
              <!-- <div class="p3"></div>-->
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab name="3">
        <template #title>
          <div class="tab_title"><span>SVIP</span><i>企业版</i></div>
        </template>
        <ul class="free">
          <li>
            <div class="listItem" v-for="(item,i) in vipList['listsvip']" :key="i">
              <div class="title">{{ item.moduleName }}</div>

              <div class="p2" v-for="(item_son,sonInd) in item.subList" :key="sonInd+'c'">
                <span class="span1">{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' && item_son.permission != 'false'
                  "
                >{{ item_son.permission }}</span>
                <img src="@/assets/three/1.png" v-if="item_son.permission == 'true'" class="img01" />
                <img src="@/assets/three/2.png" v-if="item_son.permission == 'false'" class="img02" />
              </div>
              <!-- <div class="p3"></div>-->
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab name="4">
        <template #title>
          <div class="tab_title"><span>Plus</span><i>企业版</i></div>
        </template>
        <ul class="free">
          <li>
            <div class="listItem" v-for="(item,i) in vipList['listplusvip']" :key="i">
              <div class="title">{{ item.moduleName }}</div>

              <div class="p2" v-for="(item_son,sonInd) in item.subList" :key="sonInd+'c'">
                <span class="span1">{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' && item_son.permission != 'false'
                  "
                >{{ item_son.permission }}</span>
                <img src="@/assets/three/1.png" v-if="item_son.permission == 'true'" class="img01" />
                <img src="@/assets/three/2.png" v-if="item_son.permission == 'false'" class="img02" />
              </div>
              <!-- <div class="p3"></div>-->
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <moreEquity v-if="isShow" :active="active" :title="title"></moreEquity>
  </div>
</template>

<script>
import moreEquity from './IncludedBut.vue';
export default {
  props: [],
  data() {
    return { active: '0', vipList: [], title: '开通会员', isShow: true };
  },
  components: { moreEquity },
  computed: {},
  created() {
    if (this.$route.query.vLevel) {
      if (this.$route.query.vLevel == 0) {
        this.active = '0';
      } else if (this.$route.query.vLevel == 3 || this.$route.query.vLevel == 4) {
        this.active = '1';
      } else if (this.$route.query.vLevel == 5) {
        this.active = '2';
      } else if (this.$route.query.vLevel == 1) {
        this.active = '3';
      } else if (this.$route.query.vLevel == 2) {
        this.active = '4';
      }
    }
    this.isShow = true;
    let vLevel = localStorage.getItem('vipLevel');
    let initLevel = this.initVipLevel(vLevel);
    if (initLevel <= 1) {
      this.title = '立即开通';
    } else if (initLevel > this.active) {
      this.isShow = false;
    } else if (initLevel < this.active) {
      this.title = '立即升级';
    } else if (initLevel == this.active) {
      this.title = '立即续费';
    }
    this.getmodule();
  },
  mounted() {},
  watch: {
    active(val) {
      this.isShow = true;
      let vLevel = localStorage.getItem('vipLevel');
      let initLevel = this.initVipLevel(vLevel);
      if (initLevel <= 1) {
        this.title = '立即开通';
      } else if (initLevel > val) {
        this.isShow = false;
      } else if (initLevel < val) {
        this.title = '立即升级';
      } else if (initLevel == val) {
        this.title = '立即续费';
      }
    }
  },
  methods: {
    initVipLevel(aLevel) {
      let level = '';
      if (aLevel == 0) {
        level = 0;
      } else if (aLevel == 4) {
        level = 1;
      } else if (aLevel == 5) {
        level = 2;
      } else if (aLevel == 1) {
        level = 3;
      } else if (aLevel == 2) {
        level = 4;
      }
      return level;
    },
    getmodule() {
      this.$axios({
        method: 'get',
        url: '/api/module/getmodule'
      })
        .then(res => {
          if (res.data.code == 0) {
            this.vipList = res.data.data;
          }
        })
        .catch(error => {
          reject(error);
          console.log(error);
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/common/common.styl';
.moreEquity {
  // padding-top: 0.2rem;
  width: 100%;
  background-color: #f1f1f1;
  /deep/ .van-sticky--fixed {
    top: 0 !important;
  }
  .free {
    padding: 0.533333rem 0.4rem;
    margin-top: 0.013333rem;
    background: #fff;
  }
  .title {
    font-size: 0.4rem;
    font-weight: 600;
    color: #222222;
    position: relative;
    text-indent: 0.2rem;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.08rem;
      height: 0.373333rem;
      background-color: #ed8642;
      border-radius: 0.04rem;
    }
  }
  .p2 {
    display: flex;
    justify-content: space-between;
    padding-top: 0.48rem;
    &:last-child {
      padding-bottom: 0.48rem;
    }
    .font_style {
      font-size: 0.373333rem;
      color: #fd7f2c;
    }
    .span1 {
      font-size: 0.373333rem;
      color: #555555;
    }
    .img01 {
      width: 0.4rem;
      height: 0.266667rem;
    }
    .img02 {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
  .listItem {
    border-bottom: 0.013333rem solid #e5e5e5;
    margin-bottom: 0.533333rem;
    &:last-child {
      border-bottom: none;
    }
  }
  .tab_title{
    span{
      display: inline-block;
      vertical-align: middle
    }
    i{
      display: inline-block;
      font-style: normal;
      font-size: 12px;
      padding: 0 rem(10);
      line-height: rem(30)
      border-radius: rem(15);
      margin-left: rem(5)
      vertical-align: middle
      border: 1px solid #fd7f2d
      color: #fd7f2c
    }
  }
}
</style>
